<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="奖励明细"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <view class="content">
      <!-- 订单信息卡片 -->
      <view class="order-card">
        <!-- 订单编号和状态 -->
        <view class="order-header">
          <view class="order-number-section">
            <text class="order-label">订单编号：</text>
            <text class="order-number">{{ orderInfo.orderNumber }}</text>
          </view>
          <view
            v-if="orderInfo.status"
            :class="['status-badge', orderInfo.status]"
          >
            <text class="status-text">{{ orderInfo.statusText }}</text>
          </view>
        </view>

        <!-- 奖励数据 -->
        <view class="reward-data">
          <view class="data-item">
            <text class="data-label">粉丝积分：</text>
            <text class="data-value">{{ orderInfo.fansPoints }}</text>
          </view>

          <view class="data-item">
            <text class="data-label">奖励抵用券：</text>
            <text class="data-value">{{ orderInfo.rewardCoupon }}</text>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="isEmpty" class="empty-container">
        <view class="empty-icon-wrapper">
          <view class="empty-icon">
            <view class="clipboard">
              <view class="clipboard-top"></view>
              <view class="clipboard-body">
                <view class="line"></view>
                <view class="line short"></view>
                <view class="dot"></view>
              </view>
            </view>
          </view>
        </view>
        <text class="empty-text">暂无数据~</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";

// 订单信息
const orderInfo = ref({
  orderNumber: "",
  fansPoints: "0",
  rewardCoupon: "0",
  status: "",
  statusText: "",
});

// 是否为空
const isEmpty = ref(false);

// 接收订单ID
const orderId = ref("");

onLoad((options) => {
  if (options.orderId) {
    orderId.value = options.orderId;
    loadOrderDetail();
  }
});

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 加载订单详情
const loadOrderDetail = async () => {
  try {
    // TODO: 调用真实 API 获取订单详情
    console.log("加载订单详情:", orderId.value);

    // 模拟数据
    orderInfo.value = {
      orderNumber: "19801688505****6646",
      fansPoints: "0",
      rewardCoupon: "0",
      status: "refunded",
      statusText: "已退款",
    };

    // 检查是否有数据
    const hasData =
      orderInfo.value.fansPoints !== "0" ||
      orderInfo.value.rewardCoupon !== "0";
    isEmpty.value = !hasData;
  } catch (error) {
    console.error("加载订单详情失败:", error);
    uni.showToast({
      title: "加载失败",
      icon: "none",
    });
  }
};

onMounted(() => {
  // 页面加载完成
});
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 20rpx 32rpx;
}

// 订单信息卡片
.order-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 40rpx;
}

// 订单头部
.order-header {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 32rpx;
  padding-bottom: 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.order-number-section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8rpx;
}

.order-label {
  font-size: 26rpx;
  color: #666;
}

.order-number {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 6rpx 16rpx;
  border-radius: 6rpx;
  align-self: flex-start;

  &.success {
    background-color: #52c41a;
  }

  &.refunded {
    background-color: #ff4d4f;
  }

  &.pending {
    background-color: #faad14;
  }
}

.status-text {
  font-size: 22rpx;
  color: #fff;
}

// 奖励数据
.reward-data {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.data-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.data-label {
  font-size: 28rpx;
  color: #666;
}

.data-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

// 空状态
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.empty-icon-wrapper {
  margin-bottom: 40rpx;
}

.empty-icon {
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe8cc 0%, #ffd699 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.clipboard {
  position: relative;
  width: 160rpx;
  height: 180rpx;
}

.clipboard-top {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 20rpx;
  background-color: #ffb366;
  border-radius: 8rpx 8rpx 0 0;
}

.clipboard-body {
  position: absolute;
  top: 15rpx;
  left: 0;
  width: 160rpx;
  height: 165rpx;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.line {
  width: 100%;
  height: 8rpx;
  background-color: #ffcc99;
  border-radius: 4rpx;
  margin-bottom: 16rpx;

  &.short {
    width: 60%;
  }
}

.dot {
  width: 16rpx;
  height: 16rpx;
  background-color: #ffb366;
  border-radius: 50%;
  margin-top: 8rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>
